﻿<!doctype html>
<html>
<head>
    <meta>
    <title>购物商城 - DTcms网站管理系统</title>

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery.flexslider-min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/common.js"></script>

    <script type="text/javascript">
        $(function () {
            $("#focus-box").flexslider({
                directionNav: false,
                pauseOnAction: false
            });
        });
    </script>

</head>
<body id="goods">

<!--页面头部-->
<div id="header"></div>
<script>$("#header").load("_header.html");</script>
<!--/页面头部-->

<!--当前位置-->
<div id="app">

    <div class="section">
        <div class="location">
            <span>当前位置：</span>
            <a href="index.html">首页</a> &gt;
            <a href="goods.html">购物商城</a>
        </div>
    </div>
    <!--/当前位置-->

    <!--导航推荐-->
    <div class="section">
        <div class="wrapper">
            <div class="wrap-box">
                <!--类别菜单-->
                <div class="left-220" style="margin:0;">
                    <div class="banner-nav">
                        <ul>
                            <!--此处声明下面可重复循环-->
                            <li>
                                <h3>
                                    <i class="iconfont icon-arrow-right"></i>
                                    <span>手机数码</span>
                                    <p>

                                        手机通讯

                                        摄影摄像

                                        存储设备

                                    </p>
                                </h3>
                                <div class="item-box">
                                    <!--如有三级分类，此处可循环-->
                                    <dl>
                                        <dt><a href="">手机数码</a></dt>
                                        <dd>
                                            <a href="">手机通讯</a>

                                            <a href="">摄影摄像</a>

                                        </dd>
                                    </dl>
                                </div>
                            </li>

                            <li>
                                <h3>
                                    <i class="iconfont icon-arrow-right"></i>
                                    <span>电脑办公</span>
                                    <p>
                                        电脑整机

                                        外设产品

                                        办公打印
                                    </p>
                                </h3>
                                <div class="item-box">
                                    <!--如有三级分类，此处可循环-->
                                    <dl>
                                        <dt><a href="">电脑办公</a></dt>
                                        <dd>

                                            <a href="">电脑整机</a>

                                            <a href="">外设产品</a>

                                            <a href="">办公打印</a>

                                        </dd>
                                    </dl>
                                </div>
                            </li>

                            <li>
                                <h3>
                                    <i class="iconfont icon-arrow-right"></i>
                                    <span>影音娱乐</span>
                                    <p>

                                        平板电视

                                        音响DVD

                                        影音配件

                                    </p>
                                </h3>
                                <div class="item-box">
                                    <!--如有三级分类，此处可循环-->
                                    <dl>
                                        <dt><a href="">影音娱乐</a></dt>
                                        <dd>

                                            <a href="">平板电视</a>

                                            <a href="">音响DVD</a>

                                            <a href="">影音配件</a>

                                        </dd>
                                    </dl>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>
                <!--/类别菜单-->

                <!--幻灯片-->
                <div class="left-705">
                    <div class="banner-img">
                        <div id="focus-box" class="focus-box">
                            <ul class="slides">
                                <li>
                                    <a href="goods.html">
                                        <img src="images/focus_1.png"/>
                                    </a>
                                </li>
                                <li>
                                    <a href="goods.html">
                                        <img src="images/focus_2.png"/>
                                    </a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
                <!--/幻灯片-->

                <!--推荐商品-->
                <div class="left-220">
                    <ul class="side-img-list">
                        <li v-for="(goods, index) in recommend_goods">
                            <div class="img-box">
                                <label>{{ index+1 }}</label>
                                <img :src="goods.img_url"/>
                            </div>
                            <div class="txt-box">
                                <a :href="'goods_detail.html?id=' + goods.id">{{ goods.title }}</a>
                                <span>{{ goods.create_time | formatDate }}</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--/推荐商品-->

            </div>
        </div>
    </div>

    <!--分类推荐-->
    <div class="section">
        <!--子类-->
        <template v-for="(category, index) in categories">
            <div class="main-tit">
                <h2>{{ category.title }}</h2>
                <p>
                    <a :href="'list.html?category=' + sub.id"
                       v-for="(sub, index) in category.goodscategory_set">{{ sub.title }}</a>
                    <a href="">更多<i>+</i></a>
                </p>
            </div>
            <!--/子类-->
            <div class="wrapper clearfix">

                <div class="wrap-box">
                    <ul class="img-list">

                        <li v-for="(goods, index) in category.goods">
                            <a :href="'goods_detail.html?id=' + goods.id">
                                <div class="img-box"><img :src="goods.img_url"/></div>
                                <div class="info">
                                    <h3>{{ goods.title }}</h3>
                                    <p class="price"><b>¥{{ goods.sell_price }}</b>元</p>
                                    <p>
                                        <strong>库存 {{ goods.stock }}</strong>
                                        <span>市场价：<s>{{ goods.market_price }}</s></span>
                                    </p>
                                </div>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </template>
    </div>
    <!--/分类推荐-->

</div>

<!--页面底部-->
<div id="footer"></div>
<script>$("#footer").load("_footer.html");</script>
<!--/页面底部-->

<script src="js/axios-0.18.0.min.js"></script>
<script src="js/vue-2.5.16.js"></script>
<script src="js/goods.js"></script>

</body>
</html>
